<template>
  <div
    class="fixed left-0 top-0 right-0 bottom-0 flex items-center justify-center z-1"
    style="background: rgba(0, 0, 0, 0.5)"
  >
    <div :style="{ width: '90%' }" class="bg-white rounded-10px">
      <div class="px-20px py-18px">
        <div class="text-16px font-500 text-center">取消事项</div>
        <div class="pt-12px pb-24px">
          <Field
            v-model="cancelText"
            rows="3"
            autosize
            type="textarea"
            maxlength="150"
            :disabled="loading"
            show-word-limit
            placeholder="请输入取消原因"
            class="rounded-10px"
          />
        </div>
        <div class="flex items-center">
          <Button
            class="flex-1 !rounded-10px"
            @click="handleCancel"
            plain
            :disabled="loading"
            type="primary"
          >
            取消
          </Button>
          <Button
            @click="handleConfirm"
            :loading="loading"
            class="flex-1 !ml-9px !rounded-10px"
            type="primary"
          >
            确认
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Field, Button, Toast } from "vant";
import { fetchTodoCancel } from "@/services";
export default {
  components: {
    Field,
    Button,
  },
  data() {
    return {
      loading: false,
      showCancel: false,
      cancelText: null,
    };
  },
  created() {
    this._showCancel();
  },
  methods: {
    _showCancel() {
      this.cancelText = null;
    },
    handleCancel() {
      this.$router.back();
    },
    async handleConfirm() {
      try {
        if (this.cancelText) {
          this.loading = true;
          await fetchTodoCancel({
            id: this.$route.query.id,
            cancelReason: this.cancelText,
          });
          this.loading = false;
          Toast("取消成功");
          this.$store.commit(`work/${this.$route.query.load}`, {
            value: true,
          });
          this.$nextTick(() => {
            this.handleCancel();
          });
        } else {
          Toast("请输入取消原因");
        }
      } catch (error) {
        this.loading = false;
        Toast("取消失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-cell {
    background: #f5f5f5;
  }
}
</style>
